<script>
  export default {
    name: 'singleGap',
    props: {
      margin: {
        type: String,
        default: '0 0 0 0',
      },
      padding:{
        type: String,
        default: '19rpx 0 19rpx 0',
      },
      title: {
        type: String,
        default: '',
      },
      color: {
        type: String,
        default: '#4B4B4B',
      },
      isShowTitle: {
        type: Boolean,
        default: true,
      },
      height: {
        type: String,
        default: 'auto',
      },
    },
    methods: {
      click() {
        this.$emit('elementClick');
      },
    },
  };
</script>

<template>
  <view class="singleGap flex justify-between"
        :style="{
          margin:margin,
          height:height,
          padding:padding
        }"
        @click="click"
  >
    <view class="singleGap_title flex align-center ml_18" v-if="isShowTitle">
      <text class="singleGap_title_text" :style="{
        color:color
      }">{{ title }}
      </text>
    </view>
    <view class="singleGap_content w-full flex flex-column justify-center">
      <view class="ml_18 mr_18">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .singleGap {
    width: 702rpx;
    background: #FFFFFF;
    padding: 19rpx 0;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .singleGap_title {
      .singleGap_title_text {
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
      }
    }
  }
</style>